<template>
  <scroll-view
    :scroll-x="false"
    :scroll-y="true"
    :show-scrollbar="false"
    :refresher-enabled="true"
    @refresherrefresh="refresherRefresh"
    :refresher-triggered="props.refresherTriggered"
    refresher-background="transparent"
    refresher-default-style="none"
    @scrolltolower="scrolltolower"
    :scroll-anchoring="true"
  >
    <template #refresher>
      <view class="scroll-loading-box">
        <uni-load-more status="loading" icon-type="circle" :show-text="false" color="#0030F9" />
      </view>
    </template>
    <slot></slot>
  </scroll-view>
</template>

<script setup lang="ts">
import {useAppStore} from "@/stores";

defineOptions({name: 'DScrollView'})

const props = defineProps({
  refresherTriggered: {
    type: Boolean,
    default: null,
  },
  refreshPage: {
    type: Boolean,
    default: false,
  }
});

const $emit = defineEmits(['refresherrefresh', 'scrolltolower'])

function scrolltolower() {
  $emit('scrolltolower');
}

function refresherRefresh() {
  useAppStore().setRefreshPage(true);
  $emit('refresherrefresh')
  setTimeout(() => {
    useAppStore().setRefreshPage(false);
  }, 200)
}
</script>

<style scoped lang="scss">
.scroll-loading-box {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #fff;
  margin: 0 auto;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
}
</style>
